<template>
	<view>
		<!-- 图片轮播 S -->
		<view class="img_swiper_box">
			<swiper @change="change" class="swiper" circular autoplay="true" interval="2000" duration="500">
				<swiper-item class="tp-w100 tp-h100" v-for="(item,index) in swpList" :key="index" @click="previewImg(item,swpList)">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<swiper-dot class="dot" :current="current" :list="swpList"></swiper-dot>
			<text class="img-lable">{{ travelTypes}}</text>
		</view>
		<!-- 图片轮播 E -->
		<!-- 收藏分享 S -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="share-box level_align">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="share-box level_align">
				<!-- #endif -->
				<!-- <view class=" tp-mr20" @click="collect">
					<image class="tp-img64" v-if="info.isCollect == 1" src="../static/icon/shou0.png" mode=""></image>
					<image class="tp-img64" v-else src="../static/icon/shou1.png" mode=""></image>
				</view> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="">
					<button class="sharebutton" type="default" open-type="share">
						<image class="tp-img64" src="../static/icon/fenxiang1.png" mode=""></image>
					</button>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
		</view>
		<!-- #endif -->
		<!-- 收藏分享 E -->
		<!-- 简介信息 S -->
		<view class="hotel-info tp-pd30 tp-pb20 tp-bgf tp-pr tp-mb2">
			<view class="level_align ">
				<text class="tp-fz32 tp-fc333 tp-fw600 tp-lh44 flex-1">{{info.travelName || ''}}</text>
			</view>
			<view class="tp-fc666 tp-fz26 tp-lh44  tp-mt10">{{info.travelIntro || ''}}</view>

			<view class="level_align flex_between tp-mt15">
				<view class="flex align_baseline tp-red tp-fz24">
					￥<text class="tp-fz36">{{info.currentPrice || 0}}</text>起
				</view>
				<view class="flex align_baseline">
					<!-- <text class="tp-fc999 tp-fz24 tp-mr20">热度：{{info.sales || 0}}</text> -->
					<text class="tp-yellow tp-fz30">{{info.travelScore || 0}}分</text>
				</view>
			</view>
		</view>
		<view class="level_align flex_wrap tp-ofh tp-ptb0lr30 tp-bgf">
			<view class="quan-tag tp-wsn tp-lh40 tp-mr20 tp-mb20 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(item,index) in info.travelLabels"
			 :key="index">
				{{item}}
			</view>
		</view>
		<!-- 简介信息 E -->

		<view class="tp-h88 level_align flex_between tp-ptb0lr30 tp-bgf tp-mt20" @click="pageJumps('../scenic/scenicPreferential?pageName=travel&id=' + id)" v-if="couponList.length">
			<view class="level_align">
				<image class="tp-img44 tp-mr20" src="../static/icon/quan.png" mode=""></image>
				<text>优惠券</text>
			</view>
			<view class="level_align">
				<text class="tp-ptb0lr20 tp-lh44 center_combo tp-br8 tp-red tp-mr20 tp-border1" style="border-color: #FF4A37;" v-for="(item,index) in couponList" :key="index">{{item.couponName}}</text>
				<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 评价 S -->
		<view class="evaluate-box tp-bgf tp-mt20" v-if="evaluateList.length">
			<!-- 标题块 S -->
			<view class="tp-bgf level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('/pagesSecond/hotel/evaluateMore?pageName=travel&id='+ id)">
				<view class="level_align tp-fc333 tp-fz32 tp-fw600">
					<view class="tp-mr20 lan-line"></view>
					<text>用户评价</text>
				</view>
				<view class="flex-1 level_align flex_end tp-fz24 tp-fc999">
					<view class="flex-1 tp-tr tp-mr15">
						<input type="text" disabled placeholder="查看更多" />
					</view>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!-- 标题块 E -->
			<view class="level_align flex_wrap tp-ptb0lr30 tp-mb20">
				<view class="label-tag tp-dib tp-wsn tp-ptb0lr20 tp-br40 tp-lh54 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" style="background: #FEEDEC;"
				 v-for="(item,index) in evaluateLabelList" :key="index">
					{{item.label}}({{item.value}})
				</view>
			</view>

			<view class="tp-ptb0lr30  tp-pb20 tp-bgf" v-for="(item,index) in evaluateList" :key="index">
				<!-- 头部信息栏 -->
				<view class="level_align flex_between">
					<view class="level_align">
						<image class="tp-img64 tp-mr20 tp-br40" :src="item.customerAvatar" mode=""></image>
						<view class="flex flex_column flex_between">
							<view class="tp-lh44 tp-fc333 tp-fz26">
								{{item.customerName}}
							</view>
							<view class="tp-lh40 tp-fc666">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="tp-yellow tp-fz30 tp-fw600">
						{{item.score || 5}}分
					</view>
				</view>
				<!-- 内容 -->
				<view class="tp-mt20 tp-mt10">
					<view class="tp-fz26 tp-fc333 tp-lh44">
						{{item.score || 5}}分
					</view>
					<view class="level_align tp-mt20 flex_wrap">
						<view class="tp-mb20" v-for="(urlItm, ind) in item.imgsList" :index="ind" :key="ind" @click="previewImg(urlItm,item.imgsList)"
						 :style="{marginRight:(ind+1)%4 == 0 ?'0':'35.3rpx'}">
							<image class="imgs tp-br8" :src="urlItm" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 E -->


		<!-- 展示选择 S -->
		<view class="tp-h98 level_align flex_between tp-fc333 tp-fz32 tp-bgf tp-mt20 tp-mb2">
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 0}" @click="actice = 0">
				行程特色
			</view>
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 1}" @click="actice = 1">
				{{info.travelDay || 0}}日行程
			</view>
			<view class="center_combo flex-1 tp-h100" :class="{actice : actice == 2}" @click="actice = 2">
				报价明细
			</view>
		</view>
		<!-- 展示选择 E -->
		<!-- 行程 S -->
		<view class="tp-lh44 tp-pd30 tp-fz26 tp-fc333 tp-bgf" v-if="actice == 0">
			<jyf-parser :html="info.travelTrait" ref="article"></jyf-parser>

		</view>
		<!-- 行程 E -->
		<!-- 行程内容 S -->
		<view class=" tp-pd30 tp-bgf" v-if="actice == 1">
			<!-- 总览 S -->
			<view class="level_align flex_around  tp-pt30 tp-pb30 tp-bcF5 tp-br8 tp-fc333 tp-fz36">
				<view class="column_align flex_between flex-1 tp-h88" v-if="item.value != 0" v-for="(item,index) in jihuaZong" :key="index">
					<view class="">
						{{item.value}}
					</view>
					<view class="tp-fz28 tp-fc666">
						{{item.lable}}
					</view>
				</view>
			</view>
			<!-- 总览 E -->
			<!-- 明细 S -->
			<view class="flex tp-mt30 tp-lh44" v-for="(bagItem,index) in jihuaDetail" :key="index">
				<view class="tp-w88  tp-fc333 tp-fz36">
					D{{bagItem.dayNum}}
				</view>
				<view class="flex flex-1 flex_column tp-fc333 tp-fz28">
						<jyf-parser :html="bagItem.content" ref="article"></jyf-parser>
					<!-- <view class="tp-fz30">
						{{bagItem.title}}
					</view> -->
					<view class="flex flex_column tp-mt15" v-for="(item,ind) in bagItem.descVoList" :key="ind">
						<!-- <view class="">
							<text class="tp-fc666 tp-mr15">{{item.name}}： </text>
							<text>{{item.value}}</text>
						</view> -->
						<!-- 酒店 S -->
						<view v-if="item.modelType == 1" class="tp-pd20 tp-bbox flex tp-bcF5 tp-br8 tp-mt15 tp-mb20" @click="pageJumps('../hotel/hotelDetail?id=' + item.modelId)" >
							<image class="hotel-img tp-br8 tp-mr20" :src="wwwImgUrl + item.hotelIndexIntroVo.hotelCover" mode="aspectFill"></image>
							<view class="flex flex_column flex-1">
								<view class="tp-fc tp-fz30 ellispsis1">
									{{item.hotelIndexIntroVo.hotelName}}
								</view>
								<view class="tp-yellow tp-mt10 tp-fz24">
									{{item.hotelIndexIntroVo.hotelLevel}} | {{item.hotelIndexIntroVo.hotelScore}}分
								</view>
							</view>
						</view>
						<!-- 酒店 E -->
						<!-- 景区 S -->
						<view class="tp-pd20 tp-bbox flex tp-bcF5 tp-br8 tp-mt15 tp-mb20" @click="pageJumps('../scenic/scenicDetail?id=' + item.modelId)"
						v-if="item.modelType == 2">
							<image class="scenic-img tp-br12 tp-mr20" :src="wwwImgUrl + item.jqIndexIntroVo.jqCover" mode="aspectFill"></image>
							<view class="flex flex_column flex-1">
								<view class="tp-fc tp-fz30 ellispsis1">
									{{item.jqIndexIntroVo.jqName}}
								</view>
								<view class="tp-fc666 tp-fz24 tp-mt10 ellispsis2">
									{{item.jqIndexIntroVo.jqIntro}}
								</view>
							</view>
						</view>
						<!-- 景区 E -->
					</view>
				</view>
			</view>
			<!-- 明细 S -->
		</view>
		<!-- 行程内容 E -->

		<!-- 报价明细 S -->
		<view class="tp-pd30 tp-bgf" v-if="actice == 2">
			<view class="tp-fc666 tp-fz28 tp-lh44 tp-mb20" >
				<jyf-parser :html="info.travelPriceDetail" ref="article"></jyf-parser>
				<!-- <view class="tp-fc333 tp-fz30 tp-fw600 lh54">
					{{bagItem.title}}
				</view>
				<view class="tp-mt10" v-for="(item,ind) in bagItem.detail" :key="ind">
					<text class="tp-mr15">{{item.name}}： </text>
					<text>{{item.value}}</text>
				</view> -->
			</view>
		</view>
		<!-- 报价明细 E -->

		<view class="tp-h98 level_align flex_between tp-ptb0lr30 tp-bgf tp-btn-h100">
			<view class="column_align" @click="handleKeFu">
				<image class="tp-img44" src="../static/icon/kefu.png" mode=""></image>
				<text class="tp-fc333 tp-fz22">客服</text>
			</view>
			<view class="buy-btn tp-br12 tp-fz32 tp-fcF tp-h72 center_combo tp-ls4" @click="goToSubmit">
				立即购买
			</view>
		</view>
		<view class="tp-h98 tp-mt20"></view>
		
		<!-- 客服服务电话弹框 S-->
		<CommonServicePhone ref="takePhone" type="9"></CommonServicePhone>
		<!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import swiperDot from '@/components/swiperDot/swiperDot.vue';
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			swiperDot,
			jyfParser,
			CommonServicePhone
		},
		data() {
			return {
				current: 0, // swiper
				id: '', // 旅游详情的id
				actice: 0, // 0 行程特色 1 5日行程	2 报价明细
				swpList: [], // 轮播
				couponList: [], // 优惠券列表，只显示两个
				evaluateLabelList: [], // 评价标签列表
				evaluateList: [], // 评价列表
				jihuaZong: [], // 计划总览
				jihuaDetail: [], // 行程明细

				info: {}, // 页面数据
				travelTypes: '', // 类型
				travelGroupSkuVos: [], // 	旅游规格信息
			};
		},
		onLoad(opt) {
			this.id = opt.id
			uni.setNavigationBarTitle({
				title: opt.title
			});
			this.getEvaluateLabelList();
		},
		onShow() {
			this.getCouponList()
			this.getPageInfo()
		},
		onPullDownRefresh() {
			this.getCouponList()
			this.getPageInfo()
		},
		// 分享
		onShareAppMessage(res) {
			return {
				title: this.info.travelName,
				path: '/pagesSecond/travel/travelDetail?id=' + this.id + '&title=' + this.info.travelName,
				imageUrl: this.wwwImgUrl + this.info.travelCover
			}
		},
		methods: {
			// 获取优惠前列表
			getCouponList() {
				this.$http.get(this.$api.travelGroupCouponList + '?travelId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						if(res.data && res.data.length && res.data.length > 2){
							for(let i = 0; i < 2; i++){
								this.couponList.push(res.data[i])
							}
						} else {
							this.couponList = res.data
						}
					}
				})
			},
			// 获取页面数据
			getPageInfo() {
				this.$http.get(this.$api.travelGroupDetail + '?travelId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.info = res.data
						this.travelTypes = this.info.travelTypes.join('、')
						this.jihuaZong = [{
							lable: '天数',
							value: res.data.travelDay
						}, {
							lable: '景区',
							value: res.data.jqNum
						}, {
							lable: '交通',
							value: res.data.trafficNum
						}, {
							lable: '酒店',
							value: res.data.hotelNum
						}, ]
						this.jihuaDetail = res.data.travelGroupDetailDescVos
						this.travelGroupSkuVos = res.data.travelGroupSkuVos
						this.swpList = []
						res.data.travelBanners.map(item => {
							this.swpList.push(this.$imgUrl + item)
						})
					}
				})
			},
			// 获取评价标签 和评价
			getEvaluateLabelList() {
				this.$http.get(this.$api.travelGroupEvaluateLabelList + '?travelId=' + this.id).then(res => {
					if (res.code === 200) {
						this.evaluateLabelList = res.data
					}
				})
				this.$http.get(this.$api.travelGroupEvaluateList + '?travelId=' + this.id + '&pageNum=1&pageSize=2').then(res => {
					if (res.code === 200) {
			
						res.data.result.map(item => {
							item.imgsList = []
							let arr = item.evaluationImg.split(',')
							arr.map(it => {
								let src = this.$imgUrl + it
								item.imgsList.push(src)
							})
							if(!item.customerAvatar.startsWith('http')){
								item.customerAvatar = this.$imgUrl + item.customerAvatar
							}
						})
						this.evaluateList = res.data.result
					}
				})
			},
			// 去提交页面
			goToSubmit(){
				let {
					travelCover,travelName,travelIntro,id
				} = this.info
				let info = {
					travelCover,travelName,travelIntro,id
				}
				if(!this.travelGroupSkuVos || !this.travelGroupSkuVos.length) return uni.showToast({
					title: '旅游规格未添加',
					icon: 'none'
				})
				uni.navigateTo({
					url: './travelOrder?info=' + JSON.stringify(info) + '&travelGroupSkuVos=' + JSON.stringify(this.travelGroupSkuVos)
				})
			},
			// swiper 切换
			change(e) {
				this.current = e.detail.current;
			},
			// 预览图片
			previewImg(url, arrlist) {
				console.log(url);
				let arr = []
				// arrlist.forEach(item => {
				// 	arr.push(item.url)
				// })
				uni.previewImage({
					current: url,
					urls: arrlist,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 收藏
			collect() {
				this.$http.get(this.$api.collectHotel + '?hotelId=' + this.id).then(res => {
					if (res.code === 200) {
						this.getPageInfo();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 点击客服
			handleKeFu() {
				this.$refs.takePhone.show()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.img_swiper_box {
		width: 750rpx;
		height: 447rpx;
		position: relative;
	}

	.dot {
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
	}

	.img-lable {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 6rpx 10rpx;
		background: rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, .8);
		border-radius: 8rpx;
	}

	.quan-tag {
		display: inline-block;
		padding: 0 6rpx;
		border-color: $tc;
	}

	// 评价
	.evaluate-box {
		.imgs {
			width: 146rpx;
			height: 130rpx;
		}
	}

	.actice {
		color: $tc;
		position: relative;

		&::after {
			position: absolute;
			bottom: -3rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 36rpx;
			height: 6rpx;
			background: #00B4FF;
			border-radius: 3rpx;
		}
	}

	.hotel-img {
		width: 136rpx;
		height: 114rpx;
	}

	.scenic-img {
		width: 194rpx;
		height: 146rpx;
	}

	.buy-btn {
		width: 600rpx;
		background: #FFAF3C;
	}

	.share-box {
		position: absolute;
		top: 20rpx;
		right: 40rpx;
		z-index: 10;

		.sharebutton {
			background: transparent;
			padding: 0;
			line-height: 40rpx;

			&::after {
				border: 0;
			}
		}
	}
</style>
